<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
<form action="">
    用户名：<input type="text" v-model="username"><br>
    密码<input type="text"><br>
    确认密码<input type="text"><br>
    昵称<input type="text" v-model="nickname"><br>
    性别<input type="radio" name="gender" value="男" v-model="sex">男
    <input type="radio" name="gender" value="女" v-model="sex">女<br>

    所属城市<select v-model="num">
        <option v-for="(item,index) in arr" :key="item.name" :value="index">{{item.name}}</option> 
    </select>
    <select v-model="num1">
        <option v-for="(item,index) in arr[num].city"  :key="item.name" :value="index">{{item.name}}</option>
    </select>
    <select v-model="num2">
        <option v-for="(item,index) in arr[num].city[num1].districtAndCounty" :key="item.name" :value="index">{{item}}</option>
    </select>
    <br>
    兴趣爱好<input type="checkbox" value="吃饭" v-model="hobby">吃饭<br>
    <input type="checkbox" value="睡觉" v-model="hobby">睡觉<br>
    <input type="checkbox" value="打豆豆" v-model="hobby">打豆豆<br>
    <button>提交</button>
</form>
<table border="1">
    <thead>
        <tr>
        <th>用户名</th>
        <th>昵称</th>
        <th>性别</th>
        <th>所属城市</th>
        <th>兴趣爱好</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{username}}</td>
            <td>{{nickname}}</td>
            <td>{{sex}}</td>
            <td>{{sheng}},{{shi}},{{qu}}</td>
            <td>{{hobby.join('，')}}</td>
        </tr>
    </tbody>
</table>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            username:'',
            nickname:'',
            sex:'',
            hobby:[],
            num:0,
            num1:0,
            num2:0,
            arr : [{
                name: "河南省",
                city: [{
                    name: "石家庄市",
                    districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
                }, {
                    name: "张家回市",
                    districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
                }, {
                    name: "承德市",
                    districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
                }, {
                    name: "秦皇岛市",
                    districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
                }]
            }, { 
                name: "山北省",
                city: [{
                    name: "大原市",
                    districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
                }, {
                    name: "朔州市",
                    districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
                }, {
                    name: "大异市",
                    districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
                }, {
                    name: "阴泉市",
                    districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
                }]
        }]
        },
        computed:{
           sheng(){
               return this.arr[this.num].name
           },
           shi(){
            return this.arr[this.num].city[this.num1].name
           },
           qu(){
            return this.arr[this.num].city[this.num1].districtAndCounty[this.num2]
           }
        }
    })
</script>